<div class="adf-setting-container">
  <div class="adf-setting-card-padding"></div>
  <md-toolbar color="primary" >
    <h3>{{'SETTINGS.TITLE' | translate}}</h3>
  </md-toolbar>

  <md-card class="adf-setting-card">
    <md-card-content>

      <md-card-subtitle>{{'SETTINGS.CS-HOST' | translate }}</md-card-subtitle>

      <md-input-container class="full-width">
        <md-icon class="adf-settings-link-icon" mdPrefix>link</md-icon>
        <input mdInput
               [formControl]="urlFormControlEcm"
               data-automation-id="ecmHost"
               type="text"
               (change)="onChangeECMHost($event)"
               tabindex="2"
               id="ecmHost"
               value="{{ecmHost}}"
               placeholder="http(s)://host|ip:port(/path)">
        <md-error *ngIf="urlFormControlEcm.hasError('pattern')">
          ECM host is not valid! http(s)://host|ip:port(/path)
        </md-error>
      </md-input-container>
      <p>
      <p>
        <md-card-subtitle>{{'SETTINGS.BP-HOST' | translate }}</md-card-subtitle>

        <md-input-container class="full-width">
          <md-icon class="adf-settings-link-icon" mdPrefix>link</md-icon>
          <input mdInput
                 [formControl]="urlFormControlBpm"
                 data-automation-id="bpmHost"
                 type="text"
                 (change)="onChangeBPMHost($event)"
                 tabindex="2"
                 id="bpmHost"
                 value="{{bpmHost}}"
                 placeholder="http(s)://host|ip:port(/path)">
          <md-error *ngIf="urlFormControlBpm.hasError('pattern')">
            BPM host is not valid! http(s)://host|ip:port(/path)
          </md-error>
        </md-input-container>

    </md-card-content>
    <md-card-actions class="adf-settings-actions">

      <button md-button onclick="window.history.back()" color="primary">
        {{'SETTINGS.BACK' | translate }}
      </button>

      <button md-raised-button (click)="save($event)" [disabled]="urlFormControlBpm.hasError('pattern') || urlFormControlEcm.hasError('pattern')" color="primary">
        {{'SETTINGS.APPLY' | translate }}
      </button>

    </md-card-actions>
  </md-card>
  <div class="adf-setting-card-padding"></div>
</div>
